<template>
  <component
    :is="computedIsLogin && options && options.component"
    :param="options"
    ref="loginComponent"
  ></component>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'anovLogin',
  components: {},
  computed: {
    ...mapState('permission', ['loginId', 'isLogin', 'loginState']),
    options() {
      if (this.loginId) {
        let opt = {}
        let options = app.permissionServer.loginOptions.find(
          (opt) => opt.id == this.loginId
        )
        Object.assign(opt, options)
        return opt
      }
    },
    computedIsLogin() {
      return !this.loginState
    }
  },
  props: {},
  data() {
    return {}
  },
  mounted() {
    app.permissionServer.addEventListener('loginOpen', this.loginOpen)
    app.permissionServer.addEventListener('loginClose', this.loginClose)
  },
  methods: {
    loginOpen() {
      this.$nextTick(() => {
        let method = this.options.openMethod || 'open'
        if(this.computedIsLogin && this.options) {
          this.$refs.loginComponent[method]()
        }
      })
    },
    loginClose() {
      this.$nextTick(() => {
        let method = this.options.closeMethod || 'close'
        this.$refs.loginComponent[method]()
      })
    }
  },
  beforeDestroy() {
    app.permissionServer.removeEventListener('loginOpen', this.loginOpen)
    app.permissionServer.removeEventListener('loginClose', this.loginClose)
  }
}
</script>
<style lang="scss" scoped></style>
